<template>
  <div id="under4">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <div id="under_4_1" style="width:454px;height:282px"></div>
      </swiper-slide>
      <swiper-slide>
        <div id="under_4_2" style="width:454px;height:282px"></div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import echarts from "echarts";
import {councilhuman_day,councilrobot_day,councilhuman_month,councilrobot_month} from "@/api/api.js";
export default {
  data() {
    return {
      swiperOptions:{
         autoplay:true, 
      },
      content: null,
      content1: null,
      content2: null,
      content3: null
    };
  }, 
  mounted() {
    this.councilhuman_dayFn();
    this.councilrobot_dayFn();
    this.councilhuman_monthFn();
    this.councilrobot_monthFn();
  },
  methods: {
    async councilhuman_dayFn() {
      var params = {
        year:2019,
        month:11
      };
      var data = await councilhuman_day(params);
      console.log(data.data.content);
      try {
        if (data.data.code == 200) {
          this.content = data.data.content;
          this.renderFn();
        }
      } catch (e) {
        console.log(e);
      }
    },
    async councilrobot_dayFn() {
      var params = {
        year:2019,
        month:11
      };
      var data = await councilrobot_day(params);
      console.log(data.data.content);
      try {
        if (data.data.code == 200) {
          this.content1 = data.data.content;
          this.renderFn();
        }
      } catch (e) {
        console.log(e);
      }
    },
    async councilhuman_monthFn() {
      
      var data = await councilhuman_month();
      console.log(data.data.content);
      try {
        if (data.data.code == 200) {
          this.content2 = data.data.content;
          this.renderFn();
        }
      } catch (e) {
        console.log(e);
      }
    },
    async councilrobot_monthFn() {
      
      var data = await councilrobot_month();
      console.log(data.data.content);
      try {
        if (data.data.code == 200) {
          this.content3 = data.data.content;
          this.renderFn();
        }
      } catch (e) {
        console.log(e);
      }
    },
    renderFn() {
      var myChart1 = echarts.init(document.getElementById("under_4_1"));
      var option1 = {
        color: ["#F58080", "#47D8BE"],
        backgroundColor: "#000",
       tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#fff"
            }
          },
          backgroundColor: "rgba(255,255,255,1)",
          padding: [5, 10],
          textStyle: {
            color: "#7588E4"
          },
          extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
        },
         grid: {
          left: "5%",
          right: "8%",
          bottom: "10%",
          top: "13%",
          //	padding:'0 0 10 0',
          containLabel: true
        },
       legend: {
          data: ["人类", "机器人"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#FFF"
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        xAxis: [
          {
            // name: "时间",
            nameLocation: "center",
            nameGap: 50,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: "#fff"
              }
            },
            axisLabel: {
              rotate: 50,
              lineStyle: {
                color: "#fff"
              },
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 6
              },
            },
            
            data: [
              "2019.9",
              "2019.10",
              "2019.11",
              "2019.12",
              "2020.1",
              "2020.2",
              "2020.3",
             
            ]
          }
        ],
        yAxis: [
          {
            // name: "推文量",
            nameLocation: "center",
            nameGap: 40,
            nameTextStyle: {
              color: "#fff"
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
             splitLine:{
                 show:true,
                lineStyle:{
                type:'dashed'
              }
            },
            axisLabel: {
              color: "#fff"
            }
          }
        ],
        series: [
          {
            name: "人类",
            type: "line",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#20BAFF"
                  },
                  {
                    offset: 1,
                    color: "#023B59"
                  }
                ]),
              
              borderWidth: 4
            },
            lineStyle: {
              width: 4
            },
            data: this.content2.list
          },
          {
            name: "机器人",
            type: "line",
            itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#06FFC5"
                  },
                  {
                    offset: 1,
                    color: "#02574F"
                  }
                ]),
              
              borderWidth: 4
            },
            lineStyle: {
              width: 4
            },
            data: this.content3.list
          }
        ]
      };
      myChart1.setOption(option1);
      var myChart2 = echarts.init(document.getElementById("under_4_2"));
      var option2 = {
         backgroundColor: "#000",
        // title: {
        //   text: "今日&昨日",
        //   left: "50%",
        //   textAlign: "center"
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#fff"
            }
          },
          backgroundColor: "rgba(255,255,255,1)",
          padding: [5, 10],
          textStyle: {
            color: "#7588E4"
          },
          extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
        },
        grid: {
          left: "5%",
          right: "8%",
          bottom: "12%",
          top: "12%",
          containLabel: true
        },
       legend: {
          data: ["人类", "机器人"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#FFF"
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30"
          ],
          boundaryGap: false,
          
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 11
            }
          }
        },
        yAxis: {
          type: "value",
           splitLine:{
                 show:true,
                lineStyle:{
                type:'dashed'
              }
            },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 11
            }
          }
        },
        series: [
          {
            name: "人类",
            type: "line",
            smooth: true,
            showSymbol: false,
            symbol: "circle",
            symbolSize: 6,
            data: this.content.list,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(199, 237, 250,0.5)"
                    },
                    {
                      offset: 1,
                      color: "rgba(199, 237, 250,0.2)"
                    }
                  ],
                  false
                )
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#20BAFF"
                  },
                  {
                    offset: 1,
                    color: "#023B59"
                  }
                ])
              }
            },
            lineStyle: {
              normal: {
                width: 3
              }
            }
          },
          {
            name: "机器人",
            type: "line",
            smooth: true,
            showSymbol: false,
            symbol: "circle",
            symbolSize: 6,
            data: this.content1.list,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(216, 244, 247,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(216, 244, 247,1)"
                    }
                  ],
                  false
                )
              }
            },
            itemStyle: {
              normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#06FFC5"
                  },
                  {
                    offset: 1,
                    color: "#02574F"
                  }
                ])
              }
            },
            lineStyle: {
              normal: {
                width: 3
              }
            }
          }
        ]
      };
      myChart2.setOption(option2);
    }
  }
};
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 306px;
  margin: 0;
}
.el-carousel__container{
  height: 100%;
}
.el-carousel__item:nth-child(2n) {
  background-color: #2e374400;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #f4f9ff18;
}
</style>
<style>
.under4 .el-carousel {
  height: 100%;
}
.under4 .el-carousel__container {
  height: calc(100% - 50px);
}
</style>